<template>
  <div class="home">
    <li v-for="(item, index) in shishenList" :key="index">
      <span>
        <img :src="imgSrc(index)" />
      </span>
      <span>
      {{index}}-{{item.name}}
      </span>
    </li>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data(){
    return{
      shishenList:{
      200:{name:'aa22aa'},201:{name:'aa33aa'},202:{name:'aa44aa'},
      203:{name:'aa22aa'},224:{name:'aa33aa'},205:{name:'aa44aa'},
      206:{name:'aa22aa'},207:{name:'aa33aa'},208:{name:'aa44aa'},
      209:{name:'aa22aa'},211:{name:'aa33aa'},212:{name:'aa44aa'},
      213:{name:'aa22aa'},214:{name:'aa33aa'},215:{name:'aa44aa'}},
    }
  },
  computed:{
    imgSrc(index){
      return function(index){
        return 'https://yys.res.netease.com/pc/zt/20161108171335/data/shishen/'+ index +'.png'
      }
    }
  },
  mounted(){
    this.$axios({
      method:'get',
      url:'/get_heroid_list?rarity=0&page=1&per_page=200&_=1588777336923'
    }).then(res=>{
      this.shishenList = res.data.data
      console.log(this.shishenList)
    })
  }
}
</script>
<style lang="scss">
  .home{
    width: 100%;
    background-color: aquamarine;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li{
      width: 30vw
    }
  }
</style>